<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="StyleSheet" href="../css/jpetstore.css" type="text/css" media="screen"/>
    <script type="text/javascript" src="../js/jquery.js"></script>
</head>
<body>
<div id="Content">
    <ul class="message">
        <li id="post" style="color: #b21f2d" th:if="${order.post  eq 'no'}">商品暂未发货</li>
        <li style="color: #b21f2d" th:if="${order.post  eq 'yes'}">您的商品已发货，正在快马加鞭的向你赶来</li>
    </ul>



    <div id="Catalog">

        <h1 th:text="${order.orderId}" id="orderId">orderId</h1>
        <table>
            <tr>
                <th align="center" colspan="2">
                    Order <label th:text="${#dates.format(order.orderDate,'yyyy-MM-dd')}"></label>
                    <!--                    <fmt:formatDate value="${sessionScope.order.orderDate}" pattern="yyyy/MM/dd hh:mm:ss"/>-->
                </th>
            </tr>
            <tr>
                <th colspan="2">Payment Details</th>
            </tr>
            <tr>
                <td>Card Type:</td>
                <td th:text="${order.creditCard}">
                    <!--                    <label th:text="${#dates.format(order.cardType,'yyyy-MM-dd')}"></label>-->
                    <!--                    <c:out value="${sessionScope.order.cardType}"/>-->
                </td>
            </tr>
            <tr>
                <td>Card Number:</td>
                <td th:text="${order.creditCard}">
                    <!--                    <c:out value="${sessionScope.order.creditCard}"/>-->
                    * Fake
                    number!
                </td>
            </tr>
            <tr>
                <td>Expiry Date (MM/YYYY):</td>
                <td th:text="${order.expiryDate}">
                    <!--                    <c:out value="${sessionScope.order.expiryDate}"/>-->
                </td>
            </tr>
            <tr>
                <th colspan="2">Billing Address</th>
            </tr>
            <tr>
                <td>First name:</td>
                <td th:text="${order.billToFirstName}">
                    <!--                    <c:out value="${sessionScope.order.billToFirstName}"/>-->
                </td>
            </tr>
            <tr>
                <td>Last name:</td>
                <td th:text="${order.billToLastName}">
                    <!--                    <c:out value="${sessionScope.order.billToLastName}"/>-->
                </td>
            </tr>
            <tr>
                <td>Address 1:</td>
                <td th:text="${order.billAddress1}">
                    <!--                    <c:out value="${sessionScope.order.billAddress1}"/>-->
                </td>
            </tr>
            <tr>
                <td>Address 2:</td>
                <td th:text="${order.billAddress2}">
                    <!--                    <c:out value="${sessionScope.order.billAddress2}"/>-->
                </td>
            </tr>
            <tr>
                <td>City:</td>
                <td th:text="${order.billCity}">
                    <!--                    <c:out value="${sessionScope.order.billCity}"/>-->
                </td>
            </tr>
            <tr>
                <td>State:</td>
                <td th:text="${order.billState}">
                    <!--                    <c:out value="${sessionScope.order.billState}"/>-->
                </td>
            </tr>
            <tr>
                <td>Zip:</td>
                <td th:text="order.billZip">
                    <!--                    <c:out value="${sessionScope.order.billZip}"/>-->
                </td>
            </tr>
            <tr>
                <td>Country:</td>
                <td th:text="${order.billCountry}">
                    <!--                    <c:out value="${sessionScope.order.billCountry}"/>-->
                </td>
            </tr>
            <tr>
                <th colspan="2">Shipping Address</th>
            </tr>
            <tr>
                <td>First name:</td>
                <td th:text="${order.shipToFirstName}">
                    <!--                    <c:out value="${sessionScope.order.shipToFirstName}"/>-->
                </td>
            </tr>
            <tr>
                <td>Last name:</td>
                <td th:text="${order.shipToLastName}">
                    <!--                    <c:out value="${sessionScope.order.shipToLastName}"/>-->
                </td>
            </tr>
            <tr>
                <td>Address 1:</td>
                <td th:text="${order.shipAddress1}">
                    <!--                    <c:out value="${sessionScope.order.shipAddress1}"/>-->
                </td>
            </tr>
            <tr>
                <td>Address 2:</td>
                <td th:text="${order.shipAddress2}">
                    <!--                    <c:out value="${sessionScope.order.shipAddress2}"/>-->
                </td>
            </tr>
            <tr>
                <td>City:</td>
                <td th:text="${order.shipCity}">
                    <!--                    <c:out value="${sessionScope.order.shipCity}"/>-->
                </td>
            </tr>
            <tr>
                <td>State:</td>
                <td th:text="${order.shipState}">
                    <!--                    <c:out value="${sessionScope.order.shipState}"/>-->
                </td>
            </tr>
            <tr>
                <td>Zip:</td>
                <td th:text="${order.shipZip}">
                    <!--                    <c:out value="${sessionScope.order.shipZip}"/>-->
                </td>
            </tr>
            <tr>
                <td>Country:</td>
                <td th:text="${order.shipCountry}">
                    <!--                    <c:out value="${sessionScope.order.shipCountry}"/>-->
                </td>
            </tr>
            <tr>
                <td>Courier:</td>
                <td th:text="${order.courier}">
                    <!--                    <c:out value="${sessionScope.order.courier}"/>-->
                </td>
            </tr>
            <tr>
                <td colspan="2">Status:
                    <!--                    <c:out value="${sessionScope.order.status}"/>-->
                    <label th:text="${order.status}"></label>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <table>
                        <tr>
                            <th>Item ID</th>
                            <th>Description</th>
                            <th>Quantity</th>
                            <th>Price</th>
                            <th>Total Cost</th>
                        </tr>
                        <!--                        <c:forEach var="lineItem" items="${sessionScope.order.lineItems}">-->
                        <tr th:each="lineItem:${order.lineItems}">
                            <td>
                                <!--                                    <a href="viewItem?itemId=${lineItem.item.itemId}">-->
                                <!--                                        ${lineItem.item.itemId}-->
                                <!--                                    </a>-->
                                <a th:href="@{'/category/viewItem?itemId='+${lineItem.item.itemId}}" th:text="${lineItem.item.itemId}"></a>
                            </td>
                            <td th:if="${lineItem.item != null}" th:text="${lineItem.item.attribute1}">
                                <!--                                    <c:if test="${lineItem.item != null}">-->
                                <!--                                        ${lineItem.item.attribute1}-->
                                <!--                                        ${lineItem.item.attribute2}-->
                                <!--                                        ${lineItem.item.attribute3}-->
                                <!--                                        ${lineItem.item.attribute4}-->
                                <!--                                        ${lineItem.item.attribute5}-->
                                <!--                                        ${lineItem.item.product.name}-->
                                <!--                                    </c:if>-->
                                <!--                                    <c:if test="${lineItem.item == null}">-->
                                <!--                                        <i>-->
                                <!--                                            {description unavailable}-->
                                <!--                                        </i>-->
                                <!--                                    </c:if>-->
                            </td>
                            <td th:if="${lineItem.item==null}" >
                                {description unavailable}
                            </td>
                            <td th:text="${lineItem.quantity}">
                                <!--                                    ${lineItem.quantity}-->
                            </td>
                            <td th:text="'$'+ ${#numbers.formatDecimal(lineItem.unitPrice,3,3,'COMMA')}">
                                <!--                                    <fmt:formatNumber value="${lineItem.unitPrice}" pattern="$#,##0.00"/>-->
                            </td>
                            <td th:text="'$'+ ${#numbers.formatDecimal(lineItem.total,3,3,'COMMA')}">
                                <!--                                    <fmt:formatNumber value="${lineItem.total}" pattern="$#,##0.00"/>-->
                            </td>
                        </tr>
                        <!--                        </c:forEach>-->
                        <tr>
                            <th colspan="5">
                                Total:
                                <!--                                <fmt:formatNumber value="${sessionScope.order.totalPrice}" pattern="$#,##0.00"/>-->
                                <label th:text="'$'+ ${#numbers.formatDecimal(order.totalPrice,3,3,'COMMA')}"></label>
                            </th>
                            <th>
<!--                                <input type="button" value="发货" id="btn">-->
                                <span th:if="${order.post  eq 'no'}"><input type="button" value="发货" id="btn"></span>
                                <span th:if="${order.post} eq 'yes'"><input type="button" value="已经发货"></span>
                            </th>
                        </tr>
                    </table>
                </td>
            </tr>

        </table>

    </div>
</div>
</body>
</html>
<script type="text/javascript">

    // document.getElementById("btn").onclick=function () {
    //     document.getElementById("post").innerText="您的商品已发货，正在快马加鞭的向你赶来";
    // }

    $('#btn').on('click',function(e){
        {
            var orderId = $("#orderId").text();
            $.ajax({
                url:'/AccountManage/post',
                type:'POST',
                data:{orderId:orderId},
                success:function (data) {
                    if(data=="0")
                    {
                        alert("商品发货失败")
                    }
                    else {
                        alert("商品发货成功")
                        document.getElementById("post").innerText="您的商品已发货，正在快马加鞭的向你赶来";
                    }
                },
                error:function () {
                    alert("ajax请求失败")
                    console.log(data);
                }
            })
        }
    })
</script>